<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import api from '@/api'
import UploadImage from '@/components/uploadImage.vue'
const $route = useRoute()
const $router = useRouter()
const title = ref('')

const form = reactive({
  name: '',
  mobile: '',
  email: '',
  biographical_notes: '',
  image: '',
  record: [],
  status: 1,
})

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const handleSubmit = (data) => {
  console.log(data)
}

const goBack = () => {
  $router.go(-1)
}

const staffList = ref([
  {
    label: '张三',
    value: '张三',
  },
  {
    label: '李四',
    value: '李四',
  },
])

const logs = ref([])

const openFileUrl = () => {
  if (!form.biographical_notes) {
    Modal.error({
      title: '提示',
      content: '没有简历文件',
    })
    return
  }
  Modal.confirm({
    title: '提示',
    content: '是否下载面试人员简历？',
    onOk: () => {
      window.open(form.biographical_notes)
    },
  })
}

const getConfigs = async () => {
  const res = await api.get(
    `/recruit/interviewConfig?application_worker_id=${$route.query.id}&recuit_plan_id=${$route.query.plan_id}`
  )
  if (res.code !== 200) {
    Modal.error({
      title: '提示',
      content: res.message,
    })
    return
  }
  form.id = res.data.id
  form.name = res.data.name
  form.mobile = res.data.mobile
  form.email = res.data.email
  form.biographical_notes = res.data.biographical_notes
  form.image = res.data.image
  form.channel = res.data.channel
  let record = res.data.record
  form.status = res.data.status
  form.created_at = res.data.created_at
  record.forEach((item, index) => {
    item.can_edit = false
    if (item.number_interview == 1) {
      if (item.status == 1 || item.status == 0) {
        item.can_edit = true
      }
    } else {
      if (
        record[index - 1].status == 2 &&
        (item.status == 1 || item.status == 0)
      ) {
        item.can_edit = true
      }
    }
  })
  console.log(record)
  form.record = record
}

const getLogs = async () => {
  const res = await api.get(
    `/recruit/reservationLogList?application_worker_id=${$route.query.id}`
  )
  logs.value = res.data
}

const getStaffs = async (val = '') => {
  const res = await api.get('/recruit/staffList', { keyword: val })
  staffList.value = res.data.items
}

const confirm = async () => {
  const records = form.record.filter((item) => {
    return item.can_edit
  })
  // if (records.length === 0) {
  //   Message.error('没有可编辑的面试记录')
  //   return
  // }
  // const record = records[0]
  // if (!record.reservation_time) {
  //   Message.error('请选择预约时间')
  //   return
  // }
  // if (![1, 2].includes(record.interview_mode)) {
  //   Message.error('请选择面试形式')
  //   return
  // }
  // if (!record.interview_worker) {
  //   Message.error('请选择面试官')
  //   return
  // }

  const record = records.length > 0 ? records[0] : null
  console.log(record)

  let recordData = {}
  if (record) {
    recordData = {
      record_id: record.id,
      reservation_time: record.reservation_time,
      interview_mode: record.interview_mode,
      interview_worker: record.interview_worker,
      number_interview: record.number_interview,
      interview_form: record.interview_form,
      remarks: record.remarks,
    }
  }
  let data = {
    recuit_plan_id: $route.query.plan_id,
    application_worker_id: $route.query.id,
    name: form.name,
    mobile: form.mobile,
    email: form.email,
    channel: form.channel,
    biographical_notes: form.biographical_notes,
    image: form.image,
  }

  const formData = Object.assign({}, data, recordData)
  console.log(formData)
  const res = await api.post('/recruit/subInterviewConfig', formData)
  if (res.code !== 200) {
    Message.error(res.message)
    return
  }
  Message.success('提交成功')
  init()
}

const init = async () => {
  getConfigs()
  getLogs()
  getStaffs()
}

const canEdit = () => {
  let canEdit = false
  form.record.forEach((item) => {
    if (item.can_edit) {
      canEdit = true
    }
  })
  return canEdit
}

init()
</script>

<template>
  <div class="page">
    <div class="header">面试配置</div>
    <span style="position: relative; top: -34px; left: 28px">{{
      form.created_at
    }}</span>

    <div class="record_body">
      <div class="form_body">
        <a-form auto-label-width :model="form">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="应聘者姓名">
                <a-input v-model="form.name" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="mobile" label="联系电话">
                <a-input v-model="form.mobile" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="muban" label="个人简历">
                <a-button type="primary" @click="openFileUrl"
                  >点击下载查看</a-button
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="image"
                label="图像"
                help="请上传jpg、png、gif格式图片、文件大小不能超过1MB"
                validate-trigger="input"
              >
                <!-- <a-image
                  v-if="form.image"
                  width="100px"
                  height="100px"
                  :src="form.image"
                /> -->
                <UploadImage
                  v-model="form.image"
                  width="100px"
                  height="100px"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="email" label="联系邮箱">
                <a-input v-model="form.email" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="channel" label="渠道">
                <a-input v-model="form.channel" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="flex" style="padding-bottom: 20px">
          <div class="table_name">
            <div
              class="w32 h32 jc_c"
              v-for="(item, index) in form.record"
              :key="index"
            >
              <div
                class="circle_cell circle_cell_green"
                :class="{
                  circle_cell_green: item.status == 2,
                  circle_cell_yellow: item.status == 1 || item.status == 0,
                  circle_cell_red: item.status == 3,
                }"
              ></div>
            </div>
          </div>
          <div class="table_body">
            <a-table
              :data="form.record"
              :pagination="false"
              :bordered="{ headerCell: true, cell: true }"
              :show-header="false"
            >
              <template #columns>
                <a-table-column align="center" data-index="reservation_time">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">
                      {{
                        record.number_interview == 1
                          ? '初试预约时间'
                          : `第${record.number_interview}轮预约时间`
                      }}：
                    </div>
                  </template>
                </a-table-column>
                <a-table-column align="center" data-index="time">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c" v-if="record.can_edit">
                      <a-date-picker
                        show-time
                        v-model="record.reservation_time"
                      ></a-date-picker>
                    </div>

                    <div class="flex at_c" v-else-if="record.reservation_time">
                      {{ record.reservation_time }}
                    </div>
                    <div class="flex at_c" v-else>
                      未进行第{{ rowIndex }}轮面试
                    </div>
                  </template>
                </a-table-column>
                <a-table-column align="center" data-index="mianshixingshi">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">面试形式：</div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">
                      <a-radio
                        disabled
                        v-model="record.interview_mode"
                        :value="1"
                        name="interview_mode"
                        >人机面试</a-radio
                      >
                    </div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">
                      <a-radio
                        :disabled="!record.can_edit"
                        v-model="record.interview_mode"
                        :value="2"
                        name="interview_mode"
                        >人工面试</a-radio
                      >
                    </div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">
                      <a-radio-group
                        :disabled="!record.can_edit"
                        v-model="record.interview_form"
                        direction="vertical"
                      >
                        <a-radio :value="1">远程面试</a-radio>
                        <a-radio :value="2">现场面试</a-radio>
                      </a-radio-group>
                    </div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">面试官配置</div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c" v-if="record.can_edit">
                      <a-select
                        :disabled="!record.can_edit"
                        v-model="record.interview_worker"
                        allow-search
                        allow-clear
                        @search="getStaffs"
                        placeholder="请选择面试官"
                      >
                        <a-option
                          v-for="(item, index) in staffList"
                          :key="index"
                          :value="item.id"
                          >{{ item.name }}</a-option
                        >
                      </a-select>
                    </div>
                    <div class="flex at_c" v-else>
                      {{
                        record.interview_worker_name
                          ? record.interview_worker_name
                          : '未配置'
                      }}
                    </div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="flex at_c">备注</div>
                  </template>
                </a-table-column>
                <a-table-column align="center">
                  <template #cell="{ record, rowIndex }">
                    <div class="diytd">
                      <a-textarea v-model="record.remarks" auto-size />
                    </div>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </div>
        </div>

        <div class="flex jc_e mt20">
          <a-space>
            <a-button @click="goBack" type="primary" status="danger"
              >取消</a-button
            >
            <a-button @click="confirm" type="primary">确认</a-button>
          </a-space>
        </div>
      </div>

      <a-divider />

      <div class="form_body">
        <div class="form_body_title tac">提交日志</div>

        <a-table
          :data="logs.items"
          :bordered="{ headerCell: true, cell: true }"
        >
          <template #columns>
            <a-table-column title="序号" :width="120">
              <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
            </a-table-column>
            <a-table-column
              title="时间"
              align="center"
              data-index="created_at"
            ></a-table-column>
            <a-table-column
              title="操作"
              align="center"
              data-index="event"
            ></a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 95%;
  border-bottom: 0;
}
.top {
  display: flex;
  margin-bottom: 20px;
}
.topdiv {
  margin-right: 10px;
  padding: 20px 20px;
  background-color: white;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

:deep(.arco-table-cell):has(.diytd) {
  padding: 0;
}
:deep(.arco-table-cell):has(.diytd) .diytd {
  padding: 0.6rem 1.06667rem;
  border-bottom: 1px solid #ddd;
}
:deep(.arco-table-cell):has(.diytd) .diytd:last-child {
  border: none;
}
.w32 {
}

.h32 {
  height: 32px;
  /* display: flex;
  align-items: center; */
}

.record_body {
  box-sizing: border-box;
  padding: 20px 24px;
}

.form_body {
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
  margin-bottom: 20px;
}

.form_body_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.table_name {
  width: 100px;
  box-sizing: border-box;
  padding: 0 40px;
  font-size: 14px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.table_body {
  width: 100%;
}

.table_bottom {
  display: flex;
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e6eb;
}

.table_bottom > div {
  box-sizing: border-box;
  padding: 0.6rem 1.06667rem;
  text-align: center;
}

.table_bottom > div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.table_bottom .name {
  width: 100px;
}

.page_bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
}

.circle_cell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #819a59;
  box-shadow: 1px #0000;
}

.circle_cell_green {
  background-color: rgb(149, 242, 4);
}
.circle_cell_yellow {
  background-color: rgb(245, 154, 35);
}
.circle_cell_red {
  background-color: rgb(217, 0, 27);
}
</style>
